<template>
    <div>

        <!--模糊查询 -->
        <el-form :inline="true" :model="restaurantSearch" class="demo-form-inline" >
            <el-form-item >
                <el-select v-model="restaurantSearch.rid" placeholder="选择饭店">
                    <el-option v-for="kind in kinds" :label="kind.restaurantName" :value="kind.rid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="reset">重置</el-button>

            </el-form-item>
        </el-form>

    <!-- 审核添加菜品表格 -->
        <el-table
                :data="CheckCookTableData"
                border
                style="width: 100%"
                :header-cell-style="getRowClass">
            <el-table-column
                    prop="mid"
                    label="编号"
                    width="60px"
            >
            </el-table-column>
            <el-table-column
                    prop="dishName"
                    label="菜名"

            >
            </el-table-column>
            <el-table-column
                    prop="requesttime"
                    label="申请时间"

            >
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="审核状态"
                    width="110px"
            >
                <template slot-scope="scope" >
                    <el-button type="primary" size="medium" v-if="scope.row.status==3" >审核中</el-button>
                    <el-button type="success" size="medium" v-if="scope.row.status==0" >申请通过</el-button>
                    <el-button type="danger" size="medium" v-if="scope.row.status==1" >申请驳回</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="restaurant.restaurantName"
                    label="餐厅名"

            >
            </el-table-column>
            <el-table-column
                    prop="checktime"
                    label="审核时间"

            >
            </el-table-column>
            <el-table-column
                    prop="usermonicker"
                    label="管理员"
                    
            >
            </el-table-column>
            <el-table-column
                    prop="bohui"
                    label="驳回理由"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="250px"

            >
                <template slot-scope="scope">
                    <el-button type="success"  @click="pass(scope.row.mid)" v-if="scope.row.status==3 " size="medium">审核通过</el-button>
                    <el-button type="danger"  @click="back(scope.row.mid)" v-if="scope.row.status==3 " size="medium">审核驳回</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页组件 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--驳回弹出表单-->
        <el-dialog
                title="驳回理由"
                :visible.sync="reasonDialogVisible"
                width="40%"
        >
            <el-form ref="backRules" :model="reasonForm" label-width="80px" class="back_form">
                <el-form-item label="驳回理由" >
                    <el-input type="text" v-model="reasonForm.bohui"  onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot-scope="scope" >
                        <el-button type="primary" @click="backreason" >提交</el-button>
                        <el-button type="primary" @click="reasonDialogVisible=false" >取消</el-button>
                    </template>
                </el-form-item>
            </el-form>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "Cookcheck",
        data(){
          return{
              //当前登录角色id
              roleid:"",
              //所有的饭店信息
              kinds:[],
              //模糊查询
              restaurantSearch:{},
              //菜品审核表格
              CheckCookTableData:[],

              //当前显示的页码变量
              currentPage:1,
              pageSizes:[5,10,15],
              pageSize:5,
              //总条数
              total:0,

              //驳回理由弹出层
              reasonDialogVisible:false,
              //驳回理由表单
              reasonForm:{},
              //驳回id
              mid:"",
              //驳回表单校验规则
              backRules: {
                  bohui: [
                      {required: true, message: "请输入驳回理由", trigger: "blur"}
                  ]
              },
          }
        },
        created() {
            this.selectAllRestaurant();
            this.selectCook();
        },
        methods:{
            //重置按钮功能
            reset(){
                this.restaurantSearch={};
                this.selectCook();
            },
            //查询按钮功能
            onSubmit(){
                this.selectCook();
            },
            //查询所有饭店信息
            selectAllRestaurant(){
                this.$http.post("/user/user/selectAll").then(result=> {
                    this.kinds=result.data.data;
                })

            },

            //每页显示的条数大小改变时触发的方法
            handleSizeChange(val) {
                this.pageSize=val;
                this.selectCook();
            },
            //页码改变时触发的方法
            handleCurrentChange(val) {
                this.currentPage=val;
                this.selectCook();
            },


            // 表头样式
            getRowClass() {
                return "background:#4841C1; color:#fff;";
            },
            //查询申请菜单
            selectCook(){
               var token=sessionStorage.getItem("token");
                this.$http.post("/user/user/selectCook?currentPage="+this.currentPage+"&pageSize="+this.pageSize+"&token="+token,this.restaurantSearch).then(result=>{
                    if (result.data.code===2000){
                        this.CheckCookTableData=result.data.data.list.list;
                        this.total = result.data.data.list.total;
                       this.roleid= result.data.data.roleid;
                    }
                })
            },

            //审核通过按钮
            pass(id) {
                var token=sessionStorage.getItem("token");
                this.$http.post("/user/user/pass?token="+token+"&id="+id).then(result=> {
                    this.selectCook();
                })
            },

            //审核驳回按钮弹出表单
            back(id){
                this.reasonDialogVisible=true;
               this.mid=id;
            },

            //审核驳回弹出层确认按钮
            backreason(){
                var token=sessionStorage.getItem("token");
                this.reasonDialogVisible=false;
                this.$http.post("/user/user/bohui?mid="+this.mid+"&token="+token,this.reasonForm).then(result=> {
                    this.selectCook();
                })
            }


        },

    }
</script>

<style scoped>

</style>